<template>
    <div>
        <NavBar></NavBar>
        <div class="content-app">
            <transition name="fadeInUp" mode="out-in">
                <router-view></router-view>
            </transition>
            <div class="footer">
                <p v-html="website.website_footer"></p>
                <p>
                    Powered by
                    <a href="https://github.com/QingdaoU/OnlineJudge"
                        >OnlineJudge</a
                    >
                    Modified by
                    <a href="https://gitee.com/dongzhongzhidong">Konghayao</a>
                </p>
            </div>
        </div>
        <BackTop></BackTop>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex"
import NavBar from "@oj/components/NavBar.vue"

export default {
    name: "app",
    components: {
        NavBar
    },
    data() {
        return {}
    },
    created() {
        try {
            document.body.removeChild(document.getElementById("app-loader"))
        } catch (e) {
            console.error(e)
        }
    },
    mounted() {
        this.getWebsiteConfig()
    },
    methods: {
        ...mapActions(["getWebsiteConfig", "changeDomTitle"])
    },
    computed: {
        ...mapState(["website"])
    },
    watch: {
        website() {
            this.changeDomTitle()
        },
        $route() {
            this.changeDomTitle()
        }
    }
}
</script>

<style lang="less">
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fa {
    font-size: 1.2rem;
    margin: 0.5em;
}

a {
    text-decoration: none;
    background-color: transparent;
    &:active,
    &:hover {
        outline-width: 0;
    }
}

@media screen and (max-width: 1200px) {
    .content-app {
        margin-top: 160px;
        padding: 0 2%;
    }
}

@media screen and (min-width: 1200px) {
    .content-app {
        margin-top: 80px;
        padding: 0 2%;
    }
}

.footer {
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-size: small;
}

.fadeInUp-enter-active {
    animation: fadeInUp 0.8s;
}
</style>
